<template>

    <div id="html">
        <div id="body">
            <div class="shell">

                <div class="shell_body">

                    <div class="button" v-if="isShowBook">
                        <svg class="prev icon" t="1703064876009" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="5179" width="200" height="200">
                            <path
                                d="M571.92 933.81L240.51 536.27c-11.54-13.86-11.54-33.97 0-47.83L571.92 90.9A74.71 74.71 0 0 1 629.46 64H755c20.63 0.13 37.26 16.96 37.14 37.59a37.361 37.361 0 0 1-5.01 18.45l-224.18 382.6a18.665 18.665 0 0 0 0 18.68l224.18 382.6c10.32 17.87 4.2 40.72-13.67 51.04a37.265 37.265 0 0 1-18.46 5.01H630.95a74.727 74.727 0 0 1-59.03-26.16z"
                                fill="#333333" p-id="5180"></path>
                        </svg>
                        <svg class="next icon" t="1703064957436" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="6167" width="200" height="200">
                            <path
                                d="M393.79 960H269.74c-20.63-0.13-37.26-16.96-37.14-37.59 0.04-6.48 1.77-12.84 5.01-18.45L461.8 521.35c3.34-5.78 3.34-12.9 0-18.68L237.61 120.05c-10.32-17.87-4.2-40.72 13.67-51.04A37.294 37.294 0 0 1 269.74 64h124.05a74.71 74.71 0 0 1 57.54 26.9l331.42 397.55c11.54 13.86 11.54 33.97 0 47.83L451.33 933.83A74.723 74.723 0 0 1 393.79 960z"
                                fill="#333333" p-id="6168"></path>
                        </svg>
                        <!-- <div ><i class="iconfont icon-backward_filled"></i></div> -->

                        <!-- <div class="next"><i class="iconfont icon-forward_filled"></i></div> -->
                    </div>

                    <div class="shell_slider" v-if="isShowBook">
                        <div v-for="(book,index) in bookList" :key="index">
                            <bookItem style="cursor: pointer;" @click="gotoUpdate(index)" :title="book.title"
                                :content="book.content" :img="book.img"></bookItem>

                        </div>


                    </div>

                    <div v-else>
                        <updateBookItem :articleContent="articleContent" :articleTitle="articleTitle" @updateisShowBook="updateisShowBook" :articleId="articleId"/>
                    </div>
                </div>
            </div>

        </div>

    </div>






</template>
<script setup lang='ts'>
    import { ref, onMounted, nextTick } from 'vue'
    import bookItem from '@/pages/navbar/myArticle/components/bookItem.vue'
    import { reqGetArticleListByUserId } from '@/api/article'
    import { useRouter } from 'vue-router'
    import useUserStore from '@/store/modules/user'
    import updateBookItem from '@/pages/navbar/myArticle/components/updateBookItem.vue'
    import useArticleStore from '@/store/modules/article'

    let articleStore =useArticleStore()

    let $router = useRouter()

    let userStore = useUserStore()

    const bookList = ref([])

    const isShowBook = ref<Boolean>(true)

    const articleContent = ref()

    const articleTitle = ref()

    const articleId = ref()



    onMounted(async () => {
        
        await getBookDetail(userStore.currentUser.id)

        await a()
        
    })




    const updateisShowBook =(value)=>{
        
        isShowBook.value = value

    }

    const gotoUpdate = (index) => {
        isShowBook.value = false

        let updateArticleForm = {
            articleContent:bookList.value[index].content,
            articleTitle:bookList.value[index].title,
            articleId:bookList.value[index].articleId,
        }

        articleStore.loadUpdateArticleForm(updateArticleForm) 

        clearInterval(interval)
    }

    // nextTick(()=>{
    //     $router.go(0)
    // })


    const getBookDetail = async (userId) => {
        let result = await reqGetArticleListByUserId(userId)
        if (result.code == 200) {
            bookList.value = result.data
            
        }
    }
    // const b = () => {
    //     // 获取所有的item元素
    // var items = document.getElementsByClassName('item');
    //     // 循环遍历每个item
    //     for (var i = 0; i < items.length; i++) {
    //         // 获取当前item
    //         var item = items[i];
    //         var frame = item.getElementsByClassName('frame')[0];
    //         var frontBox = frame.getElementsByClassName('front')[0];
    //         var leftBox = frame.getElementsByClassName('left')[0];
    //         var rightBox = frame.getElementsByClassName('right')[0];
    //         // 设置背景图片
    //         frontBox.style.backgroundImage = 'url(src/pages/navbar/myArticle/img/' + (i + 1).toString().padStart(2, '0') + '.jpg)';
    //         leftBox.style.backgroundImage = 'url(src/pages/navbar/myArticle/img/' + (i + 1).toString().padStart(2, '0') + '.jpg)';
    //         rightBox.style.backgroundImage = 'url(src/pages/navbar/myArticle/img/' + (i + 1).toString().padStart(2, '0') + '.jpg)';
    //         document.body.style.transition = 'background-image 0.7s ease-in-out';
    //     }
    // }

    var interval
    function a() {

        var shell = document.getElementsByClassName('shell')[0];
        var slider = shell.getElementsByClassName('shell_slider')[0];
        var items = shell.getElementsByClassName('item');


        var prevBtn = shell.getElementsByClassName('prev')[0];
        var nextBtn = shell.getElementsByClassName('next')[0];
        // 定义变量
        var width, height, totalWidth, margin = 20,
            currIndex = 0,
             intervalTime = 3000;


        function init() {
            // 初始化函数
            resize();

            // nextTick(() => {

            move(Math.floor(items.length / 2));

            // })

            bindEvents();
            timer();
        }
        function resize() {
            // 窗口大小变化时调整大小
            width = Math.max(window.innerWidth * .20, 275);
            height = window.innerHeight * .5;
            totalWidth = width * items.length;
            // 设置slider宽度
            slider.style.width = totalWidth + "px";
            // 设置每个item的宽度和高度
            for (var i = 0; i < items.length; i++) {
                let item = items[i];
                item.style.width = (width - (margin * 2)) + "px";
                item.style.height = height + "px";
            }
        }
        function bindEvents() {
            // 窗口大小变化时调整大小
            window.onresize = resize;
            // 点击prev按钮切换item
            prevBtn.addEventListener('click', () => { prev(); });
            nextBtn.addEventListener('click', () => { next(); });
        }
        init();

        function move(index) {
            // 移动shell到指定的item
            if (index < 1) index = items.length;
            if (index > items.length) index = 1;
            currIndex = index;
            // 遍历所有item
            for (var i = 0; i < items.length; i++) {
                let item = items[i],
                    box = item.getElementsByClassName('frame')[0];



                if (i == (index - 1)) {
                    // 当前item添加active类并设置3D效果
                    item.classList.add('item--active');

                    box.style.transform = "perspective(1200px)";

                } else {
                    // 其他item移除active类并设置3D效果
                    item.classList.remove('item--active');
                    box.style.transform = "perspective(1200px) rotateY(" + (i < (index - 1) ? 40 : -40) + "deg)";

                }
            }
            // 移动slider
            slider.style.transform = "translate3d(" + ((index * -width) + (width / 2) + window.innerWidth / 2) + "px, 0, 0)";
            // 设置body背景图片
            var frontBox = items[index - 1].getElementsByClassName('front')[0];
            document.body.style.backgroundImage = frontBox.style.backgroundImage;
            document.body.style.backgroundSize = 'cover';
            document.body.style.backgroundRepeat = 'no-repeat';
        }
        function timer() {
            // 定时器，自动切换shell
            clearInterval(interval);
            interval = setInterval(() => {
                move(++currIndex);
            }, intervalTime);
        }
        // 切换item
        function prev() {
            move(--currIndex);
            timer();
        }
        function next() {
            move(++currIndex);
            timer();
        }
    };
</script>
<style scoped>
    @import url('https://static.fontawesome.com/css/fontawesome-app.css');
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400&display=swap');

    * {
        padding: 0;
        margin: 0;
        font-family: "Source Sans Pro", sans-serif;
    }

    .item--active {
        transform: scale(1.2);
    }



    /* 设置html和body元素为flex布局，水平和垂直居中对齐，高度为100vh，背景图大小为cover，溢出隐藏，背景图过渡动画时间为0.7秒 */
    #html #body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-size: cover;
        overflow: hidden;
        transition: background-image .7s ease-in-out;
    }



    /* 设置.shell元素为相对定位，flex布局，水平和垂直居中对齐，宽度和高度为100%，盒模型为border-box，背景颜色为rgba(99, 99, 99, 0.8) */
    .shell {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: rgba(99, 99, 99, 0.8);
    }

    /* 设置.button元素为flex布局，两端对齐，宽度为380px，绝对定位，左侧偏移量为50%，水平居中，底部偏移量为-80px */
    .button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 380px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -80px;
    }

    /* 设置.prev和.next元素过渡动画时间为0.25秒，层级为99999，底部偏移量为5px */
    .prev,
    .next {
        width: 70px;
        transition: transform 0.25s ease;
        z-index: 99999;
        bottom: 5px;
    }

    /* 设置.prev和.next元素中的i元素字体大小为90px，颜色为#fff，光标为指针，文字阴影为0 0 10px #ffffff */
    .prev i,
    .next i {
        font-size: 90px;
        color: #fff;
        cursor: pointer;
        text-shadow: 0 0 10px #ffffff;
    }

    /* 设置.shell_body元素宽度为100%，缩放为0.8倍，上内边距为20px，下内边距为150px */
    .shell_body {
        width: 100%;
        transform: scale(.8);
        padding: 20px 0 150px 0;
    }

    /* 设置.shell_slider元素为相对定位，过渡动画时间为1秒，背景为透明 */
    .shell_slider {
        position: relative;
        transition: transform 1s ease-in-out;
        background: transparent;
    }

    /* 设置.item元素为相对定位，左浮动，左右外边距为20px */
    .item {
        position: relative;
        float: left;
        margin: 0 20px;
    }

    /* 设置.frame元素为相对定位，宽度和高度为100%，过渡动画时间为1秒，3D变换模式为保留3D效果 */
    .frame {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 1s ease-in-out;
        transform-style: preserve-3d;
    }

    /* 设置.frame元素的伪元素为绝对定位，底部偏移量为-16%，宽度为100%，高度为60px，背景颜色为#ffffff1c，盒阴影为0px 0px 15px 5px
    #ffffff1c，3D变换为绕X轴旋转90度并向上平移20px */
    .frame:after {
        content: "";
        position: absolute;
        bottom: -16%;
        width: 100%;
        height: 60px;
        background: #ffffff1c;
        box-shadow: 0px 0px 15px 5px #ffffff1c;
        transform: rotateX(90deg) translate3d(0px, -20px, 0px);
    }

    /* 设置.box元素为flex布局，纵向排列，水平和垂直居中对齐，绝对定位，宽度和高度为100%，边框为4px实心白色，透视效果为1000px，3D变换模式为保留3D效果 */
    .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 100%;
        height: 100%;
        border: 4px solid #fff;
        perspective: 1000px;
        transform-style: preserve-3d;
    }

    /* 设置.box元素中的h1和span元素颜色为#fff，Z轴平移距离为20px */
    .box h1,
    .box span {
        color: #fff;
        transform: translateZ(20px);
    }

    /* 设置.box元素中的h1元素文字阴影为0 0 30px #1f05b4，字体大小为100px */
    .box h1 {
        text-shadow: 0 0 30px #1f05b4;
        font-size: 100px;
    }

    /* 设置.box元素中的span元素为绝对定位，底部偏移量为20px，左右内边距为25px，文字阴影为0 0 10px #1f05b4 */
    .box span {
        position: absolute;
        bottom: 20px;
        padding: 0 25px;
        text-shadow: 0 0 10px #1f05b4;
    }

    /* 设置.front、.left和.right元素的盒阴影为0 0 50px #ffffff，背景图大小为cover */
    .front,
    .left,
    .right {
        box-shadow: 0 0 50px #ffffff;
        background-size: cover;
    }

    /* 设置.left和.right元素的顶部偏移量为0，宽度为60px，背面不可见 */
    .right,
    .left {
        top: 0;
        width: 60px;
        backface-visibility: hidden;
    }

    /* 设置.left元素的左侧偏移量为0，左边框宽度为5px，3D变换为向右平移1px，Z轴平移-60px，绕Y轴逆时针旋转90度，变换原点为左侧 */
    .left {
        left: 0;
        border-left-width: 5px;
        transform: translate3d(1px, 0, -60px) rotateY(-90deg);
        transform-origin: 0%;
    }

    /* 设置.right元素的右侧偏移量为0，右边框宽度为5px，3D变换为向左平移1px，Z轴平移-60px，绕Y轴顺时针旋转90度，变换原点为右侧 */
    .right {
        right: 0;
        border-right-width: 5px;
        transform: translate3d(-1px, 0, -60px) rotateY(90deg);
        transform-origin: 100%;
        color: rgb(rgba(47, 0, 255, 0.558), 38), green, blue);
    }
</style>